<template>
  <v-contextmenu :style="styleCss" ref="contextmenu">
    <template v-for="(item,index) in menuList" >
      <v-contextmenu-item @click="handItemMenu(item)" v-if="$util.menuIsShow(item)" :key="'contextmenu' + index">
        <span class="iconfont" :class="item.iconName"></span>
        <div>{{ item.menuName }}</div>
      </v-contextmenu-item>
    </template>
  </v-contextmenu>
</template>

<script>
import vContextmenu from 'v-contextmenu' // 菜单
import 'v-contextmenu/dist/index.css' // 菜单样式

export default {
  name: "moreMenu",
  comments: {
    vContextmenu
  },
  props: {
    menuList: {
      type: Array,
      default() {
        return []
      }
    }, // 菜单列表
    styleCss:{
      type:Object,
      default() {
        return {
          width:"auto"
        }
      }
    } // 样式
  },
  created() {
    this.menuList.forEach((menu)=>{
      this.$set(menu,'visible',true)
    })
  },
  methods: {
    show(e) {
      this.$refs.contextmenu.show(e)
      this.menuList.forEach((menu)=>{
        this.$set(menu,'visible',this.$util.menuIsShow(menu))
      })
    },
    close(){
      this.$refs.contextmenu.hide()
    },
    handItemMenu(item){
      this.$emit('click',item.event)
    }
  }
}
</script>

<style scoped lang="scss">
.v-contextmenu {
  padding: 0;
  li{
    padding: 6px 6px 6px 24px;
    position: relative;
    height: auto;
    span {
      position: absolute;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      color: #83C2FD
    }
  }
  div{
    font-weight: 400;
    color: #666666;
    line-height: 17px;
    font-size: 12px;
    padding-left: 2px;
  }
  li:hover{
    background: #F7F7F7;
  }
}
</style>
